import React,{useState,useEffect} from 'react'
import { userModel  } from '../model/userMode';

export default function UseEffect() {

  let  [num,setNum] = useState(10);
  let [list,setList]= useState([]);
  let [key,setKey] = useState("");

   useEffect(()=>{
       console.log("页面进来触发");

       userModel.query({q:key}).then((res)=>{
        //    console.log(res);
          setList(res.data);

       })

   },[key]);


   useEffect(()=>{
        return  ()=>{
            console.log("页面离开")
        }
   },[]);

   let change = function(value:any){
       //

   }



  return (
    <div>UseEffect
        <h3>{num}</h3>
        <div>
            <input type="text" value={key} onChange={(e)=>{
                setKey(e.target.value);
                change(e.target.value);
            }} />
        </div>
        <div className='table'>
                    <div className='tr'>
                        <div className='td'>编号</div>
                        <div className="td">用户名</div>
                        <div className="td">密码</div>
                        <div className="td">操作</div>
                    </div>
                    {list.map((item: any) => (<div className='tr' key={item.id}>
                        <div className='td'>{item.id}</div>
                        <div className="td">{item.username}</div>
                        <div className="td">{item.userpwd}</div>
                        <div className="td" >删除</div>
                    </div>))}
                </div>
    </div>
  )
}
